<template>
  <div class="organ-list">
    <div class="list-header">
      <p class="list-title">机构列表</p>
      <div class="search-box">
        <el-input placeholder="输入关键字进行筛选" size="small" v-model="filterText"></el-input>
      </div>
    </div>
    <el-scrollbar class="tree-box">
      <el-tree
        class="filter-tree"
        :data="treeList"
        :props="defaultProps"
        :expand-on-click-node="false"
        default-expand-all
        ref="roleTree"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        node-key="id"
        highlight-current
        :draggable="false"
        :current-node-key="curNodeKey">
        <div class="custom-tree-node" slot-scope="{ node }">
          <div class="node-label">{{ node.label }}</div>
          <!-- <div class="icon-btn">
            <i class="el-icon-delete" title="删除" @click.stop="delRole(data)"></i>
          </div> -->
        </div>
      </el-tree>
    </el-scrollbar>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash'
export default {
  name: 'OrganList',
  emits: ['node-click', 'del-role'],
  props: {
    source: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      treeList: [],
      curNodeKey: '',
      filterText: '',
      defaultProps: {
        children: 'queryOutVOS',
        label: 'orgName',
      },
    }
  },
  watch: {
    source: {
      handler(list) {
        if (list && list.length) {
          this.treeList = cloneDeep(list)
          this.$nextTick(() => {
            this.curNodeKey = this.curNodeKey || (this.treeList.length ? this.treeList[0].id : '')
            let selectNode = {}
            for (let i = 0; i < this.treeList.length; i++) {
              if (this.treeList[i].id === this.curNodeKey) {
                selectNode = this.treeList[i]
                break
              }
            }
            this.$refs.roleTree.setCurrentKey(this.curNodeKey)
            this.$emit('node-click', selectNode)
          })
        } else {
          this.treeList = []
        }
      },
      immediate: true,
      deep: true,
    },
    filterText(val) {
      this.$refs.roleTree.filter(val)
    },
  },
  methods: {
    handleNodeClick(data, node) {
      const { isLeaf = false } = node
      if (isLeaf) {
        this.$nextTick(() => {
          this.curNodeKey = data.id || ''
          this.$refs.roleTree.setCurrentKey(data.id)
        })
        this.$emit('node-click', data)
      } else {
        this.$emit('node-click', data)
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.orgName.indexOf(value) !== -1
    },
    delRole(obj) {
      this.$confirm('确定删除此角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$emit('del-role', obj)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
          })
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.organ-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .tree-box {
    margin-top: 20px;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .list-header {
    padding-right: 20px;

    .list-title {
      border-bottom: 1px solid #e4eaf0;
      font-size: 16px;
      line-height: 30px;
      color: #333;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
  }

  .filter-tree {
    padding-right: 20px;
    flex: 1;

    ::v-deep .el-tree-node__content {
      height: auto;
      width: 100%;

      .el-tree-node__expand-icon {
        display: none;
      }

      .custom-tree-node {
        width: 100%;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .node-label {
          padding: 12px 0;
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .icon-btn {
          display: none;

          i {
            padding: 5px;
            cursor: pointer;
            font-size: 18px;
            color: #666;
          }
        }

        &:hover {
          .node-label {
            width: calc(100% - 20px);
          }

          .icon-btn {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
